<template>
  <div>
    <el-button @click="addProduct" type="success" style="margin-top: 20px">添加产品</el-button>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="产品名称" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editProduct(scope.row.id)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteProduct(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '产品1' },
        { id: 2, name: '产品2' },
        // ... 其他产品
      ]
    };
  },
  methods: {
    editProduct(id) {
      const product = this.products.find(p => p.id === id);
      const newName = this.$prompt('编辑产品名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: product.name
      }).then(({ value }) => {
        if (value) {
          product.name = value;
        }
      }).catch(() => {});
    },
    deleteProduct(id) {
      this.$confirm('确定删除该产品吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.products = this.products.filter(p => p.id !== id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {});
    },
    addProduct() {
      this.$prompt('输入新产品名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          const newId = this.products.length ? Math.max(this.products.map(p => p.id)) + 1 : 1;
          this.products.push({ id: newId, name: value });
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
</style>